<template>
    <!-- 工作日历 -->
  <div>
    <!-- 年和月 -->
    <el-row type="flex" justify="end">
        <el-select @change="dataChange" v-model="currentYear" size="small" style="width:120px">
            <el-option v-for="item in yearList" :key="item" :label="item" :value="item"></el-option>
        
        </el-select>
        <el-select @change="dataChange" v-model="currentMonth" size="small" style="width:120px ;margin-left: 10px;">
         <el-option v-for="item in 12" :key="item" :label="item" :value="item"></el-option>
        </el-select>
    </el-row>
    <!-- 日历组件 -->
    <el-calendar v-model="currentDate">
        <!-- 自定义日历内容 -->
        <!-- 插槽 date 当前单元格的日期  data  是对象 有day 天-->
        <template v-slot:dateCell="{ date, data }" class="content">
        <div class="date-content">
          <span class="text"> {{ data.day | getDay }}</span>
          <span v-if="isWeek(date)" class="rest">休</span>
          
        </div> 
      </template>
    </el-calendar>
  </div>
</template>

<script>
export default {
    //过滤器
    filters:{
getDay(value){
const day=value.split('-')[2]
return day.startsWith('0')?day.substr(1):day
}
    },
props:{
    // 传入的日期
    startDate:{
        type:Date,
        default:function () { 
            return new Date()
         }
    }
},
data() {
    return {
        yearList:[],//要遍历的年的数组
        currentYear:null,//当前年份 上面选择器
        currentMonth:null,//当前月份 上面选择器
        currentDate:null,//当前时间 给日历组件绑定的
    }
},
created(){
    // 获取当前年份
    this.currentYear= this.startDate.getFullYear()
    //当前月份
    this.currentMonth=this.startDate.getMonth()+1
    // 快速生成数组 前五年后五年
    this.yearList=Array.from(Array(11),(v,i)=>this.currentYear+i-5)
    // 默认值 初始化也调用一下
    this.dataChange()
},
methods: {
    
    dataChange(){
        // alert(this.currentMonth)
        // 根据上面的选择器的选择 生成最新时间 绑定给日历组件
        this.currentDate=new Date(`${this.currentYear}-${this.currentMonth}-1`)
        
    },
    //是否是休息日
    isWeek(value){
     return value.getDay()===6 || value.getDay()===0
    }
}
}
</script>
<style  scoped>

::v-deep .el-calendar-day {
  height:  auto;
 }
 ::v-deep .el-calendar-table__row td,::v-deep .el-calendar-table tr td:first-child,  ::v-deep .el-calendar-table__row td.prev{
  border:none;
 }
.date-content {
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
}
.date-content .rest {
  color: #fff;
  border-radius: 50%;
  background: rgb(250, 124, 77);
  width: 20px;
  height: 20px;
  line-height: 20px;
  display: inline-block;
  font-size: 12px;
  margin-left: 10px;
}
.date-content .text{
  width: 20px;
  height: 20px;
  line-height: 20px;
 display: inline-block;

}
::v-deep .el-calendar-table td.is-selected .text{
   background: #409eff;
   color: #fff;
   border-radius: 50%;
 }
 ::v-deep .el-calendar__header {
   display: none
 }
</style>